<script setup>
import { ref,watch } from "vue";
import { useRoute,useRouter } from "vue-router";
import goodBox from "@/components/goods/goodBox.vue";
import { categorySend, bannerSend,filterSend } from "@/api/category";
const route = useRoute();
const router = useRouter()
const categoryData = ref("");
const bannerData = ref("");
const category = async () => {
  const data = await categorySend({ id: route.params.id });
  categoryData.value = data.result;
};
const banner = async () => {
  const data = await bannerSend();
  bannerData.value = data.result;
};
category();
banner();

watch(route, (newRoute,oldRoute)=>{
 if(newRoute.matched[0].path == '/category/:id')category()
  
})

const toFilter = (id) => {
  router.push(`/filter/${id}`)
}

</script>

<template>
  <div class="category">
    <div class="category-content-center">
      <div class="category-carousel">
        <el-carousel height="350px">
          <el-carousel-item v-for="item in bannerData" :key="item.id">
            <img class="category-carousel-image" :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="category-classification">
        <div class="category-classification-title">全部分类</div>
        <div class="category-classification-content">
          <div
            class="category-classification-item"
            v-for="item in categoryData.children"
            :key="item.id"
            @click="toFilter(item.id)"
          >
            <img :src="item.picture" alt="" />
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div
        class="category-classification-items"
        v-for="item in categoryData.children"
        :key="item.id"
      >
        <div class="category-classification-item-head">
          <div>{{ item.name }}</div>
          <!-- <div>{{ item. }}</div> -->
        </div>
        <div class="category-classification-item">
          <!-- <div class="category-classification-item-good">

          </div> -->
          <good-box
            v-for="tag in item.goods"
            :key="tag.id"
            class="home-goods-item"
          >
            <img :src="tag.picture" alt="" />
            <div class="fresh-goods-text home-goods-text">
              <div class="home-goods-text-title">{{ tag.name }}</div>
              <p style="color: #aaa">{{ tag.desc }}</p>
              <p style="color: #e36844">{{ "¥" + tag.price }}</p>
            </div>
          </good-box>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.category {
  .category-content-center {
    width: 80%;
    margin: 0 auto;

    .category-carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .category-classification {
      margin: 30px 0;
      border: 1px solid #ddd;
      background-color: #fff;
      .category-classification-title {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #000;
        padding: 20px;
      }
      .category-classification-content {
        display: grid;
        padding: 0 100px 30px 100px;

        grid-template-columns: repeat(6, calc((100% - (5% * 5)) / 6));
        gap: 5%;

        .category-classification-item {
          img {
            width: 100%;
            object-fit: cover;
          }

          div {
            text-align: center;
          }
        }
      }
    }

    .category-classification-items {
      margin: 50px 0;
      background-color: #fff;
      padding: 50px;
      .category-classification-item-head {
        text-align: center;
        padding-bottom: 50px;
        font-size: 16px;
      }

      .category-classification-item {
        display: grid;
        grid-template-columns: repeat(4, calc((100% - (50px * 3)) / 4));
        gap: 50px;

        // .category-classification-item-good {
        // }
      }
    }

    .home-goods-item {
      // display: inline-block;
      img {
        width: 100%;
      }

      transition: all 0.5s;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
        0 6px 20px 0 rgba(0, 0, 0, 0.1);
      &:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transform: scale(1.05, 1.05);
      }

      .home-goods-text {
        width: 100%;
        text-align: center;
        background-color: #f0f9f4;
        .home-goods-text-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #333;
          font-size: 16px;
          padding: 5px 20px;
        }
        p {
          padding: 5px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
